<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>填写每日记录</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.8.0-rc.9/css/layui.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.8.0-rc.9/layui.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>

<body>

    <div style="margin: 0 auto; max-width: 1140px;margin-top: 5%;" id="app">


        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this" id="writerDiary">填写每日巡检记录</li>
                <li id="count">统计</li>
                <li id="serverDetail">服务器信息报表</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show" style="border: 1px solid black;">
                    <form class="layui-form" onsubmit="return false" id="myForm" v-model="myform">
                        <h2 style="margin-top: 10px;margin-left: 12px;margin-bottom: 10px;">机房巡查项</h2>
                        <div class="layui-form-item">
                            <label class="layui-form-label">温度情况</label>
                            <div class="layui-input-block">
                                <input type="radio" name="" v-model="myform.Patrol.temperature_status" value="ok"
                                    title="正常">
                                <input type="radio" name="" v-model="myform.Patrol.temperature_status" value="no"
                                    title="异常" checked>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">供电情况</label>
                            <div class="layui-input-block">
                                <input type="radio" name="" v-model="myform.Patrol.electric_status" value="ok"
                                    title="正常">
                                <input type="radio" name="" v-model="myform.Patrol.electric_status" value="no"
                                    title="异常" checked>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">机房环境</label>
                            <div class="layui-input-block">
                                <input type="radio" name="" v-model="myform.Patrol.environment_status" value="ok"
                                    title="正常">
                                <input type="radio" name="" v-model="myform.Patrol.environment_status" value="no"
                                    title="异常" checked>
                            </div>
                        </div>
                        <h2 style="margin-top: 10px;margin-left: 12px;margin-bottom: 10px;">服务检查项</h2>
                        <div class="layui-form-item">
                            <label class="layui-form-label">BES实例</label>
                            <div class="layui-input-block">
                                <input type="radio" name="" v-model="myform.Server.BES_status" value="ok" title="正常">
                                <input type="radio" name="" v-model="myform.Server.BES_status" value="no" title="异常"
                                    checked>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">服务器状态</label>
                            <div class="layui-input-block">
                                <input type="radio" name="" v-model="myform.Server.server_status" value="ok" title="正常">
                                <input type="radio" name="" v-model="myform.Server.server_status" value="no" title="异常"
                                    checked>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">备份状态</label>
                            <div class="layui-input-block">
                                <input type="radio" name="" v-model="myform.Server.backup_status" value="ok" title="正常">
                                <input type="radio" name="" v-model="myform.Server.backup_status" value="no" title="异常"
                                    checked>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">应用状态</label>
                            <div class="layui-input-block">
                                <input type="radio" name="" v-model="myform.Server.app_status" value="ok" title="正常">
                                <input type="radio" name="" v-model="myform.Server.app_status" value="no" title="异常"
                                    checked>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">备注</label>
                            <div class="layui-input-block">
                                <textarea name="remark" v-model="myform.remark" placeholder="如有特殊情况请备注"
                                    class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">KEY</label>
                            <div class="layui-input-inline">
                                <input type="text" name="" v-model="myform.key" required lay-verify="required"
                                    placeholder="请输入key" autocomplete="off" class="layui-input" value="1">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" @click="sumbitForm">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="layui-tab-item">
                    <table class="layui-table">
                        <thead>
                            <tr>
                                <th>填写时间</th>
                                <th>机房巡查项</th>
                                <th>服务器检查项</th>
                                <th>操作</th>
                                </th>
                            </tr>
                        </thead>
                        <tbody id="count_body">
                        </tbody>
                    </table>
                </div>
                <div class="layui-tab-item">
                    <table class="layui-table">
                        <colgroup>
                            <col width="150">
                            <col width="200">
                            <col>
                        </colgroup>
                        <thead>
                            <tr>
                                <th>昵称</th>
                                <th>加入时间</th>
                                <th>签名</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>贤心</td>
                                <td>2016-11-29</td>
                                <td>人生就像是一场修行</td>
                            </tr>
                            <tr>
                                <td>许闲心</td>
                                <td>2016-11-28</td>
                                <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>



    <!-- 模态框填写数据 -->
    <div></div>

    <!-- 填写不成功弹窗 -->
    <div></div>

</body>

<script>

    new Vue({
        el: '#app',
        data: {
            myform: {
                Patrol: {
                    temperature_status: "",
                    electric_status: "",
                    environment_status: ""
                },
                Server: {
                    BES_status: "",
                    server_status: "",
                    backup_status: "",
                    app_status: ""
                },
                remark: ""
            }
        },
        methods: {
            sumbitForm: function () {
                let url = "http://127.0.0.1:8089/demo/dailyForm/"
                // let url = "http://192.168.2.64:8089/demo/dailyForm/"
                let obj = {
                    "value": this.myform,
                    "key": this.myform.key
                }
                console.log(obj)

                // axios
                //     .post(url, obj)
                //     .then(response => (layer.msg(response.msg)))
                //     .catch(function (error) { // 请求失败处理
                //         console.log(error);
                //     });
            }
        }
    })




    // layui.use('form', function () {
    //     var form = layui.form;

    //     //提交
    //     form.on('submit(formDemo)', function (data) {
    //         console.log(JSON.stringify(data.field))
    //         console.log(data.field)

    //         // $.ajax({
    //         //     // url: 'http://127.0.0.1:8089/demo/dailyForm/',
    //         //     url: 'http://192.168.2.64:8089/demo/dailyForm/',
    //         //     type: 'POST',
    //         //     contentType: "application/json;charset=UTF-8",
    //         //     data: JSON.stringify({
    //         //         value: JSON.stringify(data.field),
    //         //         key: data.field.key
    //         //     }),
    //         //     success: function (d) {
    //         //         console.log(d)
    //         //         layer.msg(d.msg);
    //         //     }
    //         // })
    //         return false;
    //     });
    // });

    // //点击count的时候，访问后端拿day的数据
    // $("#count").on("click", function () {
    //     $.ajax({
    //         url: 'http://192.168.2.64:8089/demo/dailyForm/?currentPage=1&size=10',
    //         type: 'GET',
    //         async: false,
    //         success: function (data) {
    //             $("#count_body").html("")
    //             countHtml = ""
    //             for (let i = 0; i < data.list.length; i++) {
    //                 console.log(1)
    //                 jsons = JSON.parse(data.list[i].value);
    //                 obj = {
    //                     "create_time": data.list[i].createTime,
    //                     "Patrol": jsons.Patrol,
    //                     "Server": jsons.Server
    //                 }

    //                 // 校验 如果有错误，提示告警 标红
    //                 let PatrolFlag = "正常"
    //                 for (var key in obj.Patrol) {
    //                     if (obj.Patrol[key] === "no") {
    //                         PatrolFlag = "异常"
    //                         break
    //                     }
    //                 }
    //                 let ServerFlag = "正常"
    //                 for (var key in obj.Server) {
    //                     if (obj.Patrol[key] === "no") {
    //                         ServerFlag = "异常"
    //                         break
    //                     }
    //                 }

    //                 // 执行渲染
    //                 var table_html = `<tr>
    //                     <td>${obj.create_time}</td>
    //                     <td>${PatrolFlag}</td>
    //                     <td>${ServerFlag}</td>
    //                     <td><a href="data.list[i].id">查看详情</a></td>
    //                   </tr>`
    //                 console.log(1)
    //                 countHtml += table_html
    //                 layer.msg("获取成功！");
    //             }
    //             $("#count_body").html(countHtml)

    //         }
    //     })
    // })





</script>

</html>